<template>
  <!-- 子页面 排放日历 -->
  <view class="conter">
     <cc-time title='排放日历' text='选择时间' color='#fff'></cc-time>
     	 <view class="navigation_head"></view>
    <view class="head">
      <navigator class="head_a" url="../calendar_a/calendar_a">
        <view class="head_aa">
          企业一
        </view>
        <image src="../../static/organization_ranking/xl.png" mode=""></image>
      </navigator>
      <view class="head_b">
        <view class="head_ba">
          厂界
        </view>
        <view class="head_bb">
          排口
        </view>
      </view>
    </view>
    <view class="calendar">
      <view class="calendar_a">
        <view class="calendar_aa">
          一
        </view>
        <view class="calendar_aa">
          二
        </view>
        <view class="calendar_aa">
          三
        </view>
        <view class="calendar_aa">
          四
        </view>
        <view class="calendar_aa">
          五
        </view>
        <view class="calendar_aa">
          六
        </view>
        <view class="calendar_aa">
          七
        </view>
      </view>
      <view class="calendar_a">
        <view class="calendar_ab">
          27
        </view>
        <view class="calendar_ab">
          28
        </view>
        <view class="calendar_ab">
          29
        </view>
        <view class="calendar_ab">
          30
        </view>
        <view class="calendar_ab">
          31
        </view>
        <view class="calendar_ab">
          1
        </view>
        <view class="calendar_ab">
          2
        </view>
      </view>
      <view class="calendar_a">
        <view class="calendar_ab">
          3
        </view>
        <view class="calendar_ab">
          4
        </view>
        <view class="calendar_ab">
          5
        </view>
        <view class="calendar_ab">
          6
        </view>
        <view class="calendar_ab">
          7
        </view>
        <view class="calendar_ab">
          8
        </view>
        <view class="calendar_ab">
          9
        </view>
      </view>
      <view class="calendar_a">
        <view class="calendar_ab">
          10
        </view>
        <view class="calendar_ab">
          11
        </view>
        <view class="calendar_ab">
          12
        </view>
        <view class="calendar_ab">
          13
        </view>
        <view class="calendar_ab">
          14
        </view>
        <view class="calendar_ab">
          15
        </view>
        <view class="calendar_ab">
          16
        </view>
      </view>
      <view class="calendar_a">
        <view class="calendar_ab">
          17
        </view>
        <view class="calendar_ab">
          18
        </view>
        <view class="calendar_ab">
          19
        </view>
        <view class="calendar_ab">
          20
        </view>
        <view class="calendar_ab">
          21
        </view>
        <view class="calendar_ab">
          22
        </view>
        <view class="calendar_ab">
          23
        </view>
      </view>
      <view class="calendar_a">
        <view class="calendar_ab">
          24
        </view>
        <view class="calendar_ab">
          25
        </view>
        <view class="calendar_ab">
          26
        </view>
        <view class="calendar_ab">
          27
        </view>
        <view class="calendar_ab">
          28
        </view>
        <view class="calendar_ab">
          29
        </view>
        <view class="calendar_ab">
          30
        </view>
      </view>
      <!-- 表格 -->
      <view class="box">
        <view class="box_a">
          <view class="box_aa"></view>
          <view class="box_ab">
            2020-05-06
          </view>
        </view>
        <!-- 图片 -->
        <view class="box_b">
          <view class="box_ba">
            <view class="box_bd">
              14mg/m³
            </view>
            <view class="box_bs">
              日均浓度
            </view>
          </view>
          <view class="box_bb">
            <view class="box_bd">
              1.2
            </view>
            <view class="box_bs">
              超标倍数
            </view>
          </view>
          <view class="box_bc">
            <view class="box_bd">
              2.6t
            </view>
            <view class="box_bs">
              日总排放量
            </view>
          </view>
        </view>
        <view class="box_word">
          *当前超标倍数的统计方式为方式一
        </view>
      </view>
    </view>
    <!-- 图表 -->
   <uni-card >
     <view class="chart">
      <view class="change_head">
        24小时空气质量变化趋势
      </view>
      <view class="change_a">
        <view class="change_aa">
        </view>
        徽州区
      </view>
       <view class="region">
         <echarts :option="option" style="height: 300px;" @click="echartsClick"></echarts>
       </view>
     </view>
   </uni-card>
  </view>
</template>

<script>
  import echarts from '@/components/echarts/echarts.vue';
  export default {
    data() {
      return {
        option: {
          xAxis: {
            type: 'category',
            data: ['6:00', '8:00', '10:00', '12:00', '14:00', '16:00']
          },
          yAxis: {
            type: 'value'
          },
          series: [{
            data: [760, 350, 200, 100, 198, 420],
            type: 'line',
            smooth: true,
            itemStyle: {
              color: {
                type: 'linear',
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [{
                  offset: 0,
                  color: '#5B8FF9' // 0% 处的颜色
                }, {
                  offset: 1,
                  color: '#FFFFFF' // 100% 处的颜色
                }],
                global: false // 缺省为 false
              }
            },
            lineStyle: {
              color: {
                type: 'linear',
                x: 0,
                y: 0,
                x2: 1,
                y2: 1,
                colorStops: [{
                  offset: 0,
                  color: '#5B8FF9' // 0% 处的颜色
                }, {
                  offset: 0.5,
                  color: '#5B8FF9' // 0% 处的颜色
                }, {
                  offset: 1,
                  color: '#5B8FF9' // 100% 处的颜色
                }],
                global: false // 缺省为 false
              }
            },
            areaStyle: {}
          }]
        },
      };
    },
    
    methods: {
      /**
       * 点击事件
       * @param {Object} params
       */
      echartsClick(params) {
        console.log('点击数据', params)
      },
      
    }
  }
</script>

<style lang="scss">
  .navigation_head{
    height: calc(88rpx + var(--status-bar-height));
  }
  .qiun-charts {
    width: 750upx;
    height: 500upx;
    background-color: #FFFFFF;
  }
  
  .charts {
    width: 750upx;
    height: 500upx;
    background-color: #FFFFFF;
  }
  .conter {
    // height: 1708rpx;
    background-color: #F7F7F7;
    // overflow: hidden;
  }

  .head {
    display: flex;
    justify-content: space-between;
  }
  
  .head_a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 280rpx;
    height: 66rpx;
    background-color: #fff;
    margin: 20rpx 0 0 24rpx;
    font-size: 28rpx;
    font-family: PingFang-SC-Medium, PingFang-SC;
    font-weight: 500;
    color: #333333;
    image {
      margin-right: 20rpx;
      width: 22rpx;
      height: 12rpx;
    }
  }
  
  .head_aa {
    margin-left: 26rpx;
  }
  
  .head_ba {
    width: 191rpx;
    height: 66rpx;
    line-height: 66rpx;
    font-size: 24rpx;
    text-align: center;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
    color: #FFFFFF;
    background: #4EA1FF;
    border-radius: 8px;
  }
  .head_bb {
    width: 191rpx;
    height: 66rpx;
    line-height: 66rpx;
    font-size: 24rpx;
    text-align: center;
    background: #fff;
  }
  
  .head_b {
    display: flex;
    align-items: center;
    width: 382rpx;
    height: 66rpx;
    background-color: #fff;
    margin: 20rpx 24rpx 0 0;
    font-size: 28rpx;
    font-family: PingFang-SC-Medium, PingFang-SC;
    font-weight: 500;
    color: #333333;
    text-align: center;
  
    image {
      width: 22rpx;
      height: 12rpx;
    }
  }
  
  .calendar {
    width: 702rpx;
    height: 1000rpx;
    background: #FFFFFF;
    border-radius: 8rpx;
    margin: 20rpx auto 0;
  }

  .calendar_a {
    display: flex;
    justify-content: space-around;
    margin-top: 20rpx;
  }

  .calendar_aa {
    width: 80rpx;
    height: 80rpx;
    font-size: 28rpx;
    font-family: PingFang-SC-Medium, PingFang-SC;
    font-weight: 500;
    color: #666666;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .calendar_ab {
    width: 80rpx;
    height: 80rpx;
    background-color: #FF5000;
    font-size: 36rpx;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    border-radius: 4px;
    opacity: 0.4;
    color: #FFFFFF;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .box {
    width: 660rpx;
    height: 309rpx;
    margin: 51rpx auto 0;
    border-top: 1rpx solid #F1F1F1;
  }

  .box_a {
    display: flex;
  }

  .box_aa {
    width: 6rpx;
    height: 22px;
    background: #4EA1FF;
    margin: 29rpx 10rpx 0 0;
  }

  .box_ab {
    font-size: 26rpx;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
    color: #333333;
    margin-top: 29rpx;
  }

  .box_b {
    display: flex;
    justify-content: space-around;
    margin-top: 31rpx;
  }

  .box_ba {
    width: 148rpx;
    height: 148rpx;
    font-size: 24rpx;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
    color: #FFFFFF;
    background: url(../../static/home_page/yc.png) no-repeat;
    background-size: 100% 100%;
  }

  .box_bb {
    width: 148rpx;
    height: 148rpx;
    font-size: 24rpx;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
    color: #FFFFFF;
    background: url(../../static/home_page/yc.png) no-repeat;
    background-size: 100% 100%;
  }

  .box_bc {
    width: 148rpx;
    height: 148rpx;
    font-size: 24rpx;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
    color: #FFFFFF;
    background: url(../../static/home_page/zc.png) no-repeat;
    background-size: 100% 100%;
  }

  .box_bd {
    margin-top: 35rpx;
    text-align: center;
  }

  .box_bs {
    text-align: center;
  }

  .box_word {
    margin: 40rpx 0 0 20rpx;
    font-size: 26rpx;
    font-family: PingFang-SC-Medium, PingFang-SC;
    font-weight: 500;
    color: #999999;
  }

  // .chart {
  //   width: 702rpx;
  //   height: 550rpx;
  //   background-color: #fff;
  //   margin: 20rpx auto 0;
  // }
  .change_head {
    font-size: 28rpx;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
    color: #333333;
  }
  .change_a {
    display: flex;
    align-items: center;
    margin: 34rpx 0 0 30rpx;
    font-size: 22rpx;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #8C8C8C;
  }
  
  .change_aa {
    width: 15rpx;
    height: 15rpx;
    margin-right: 16rpx;
    background-color: #5B8FF9;
    border-radius: 50%;
  }
  .region{
    transform: translateY(-10%);
  }
</style>
